<template>
  <div style="font-size: 18px; position: relative">
    <span
      style="
        position: absolute;
        left: 0px;
        top: 0px;
        font-weight: bolder;
        font-family: 'sans-serif';
      "
    >
      全国各省份景点个数</span
    >
    <!-- 盒子将来echarts展示图形图标的节点 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { usetravelStore } from '../../../stores/travel'
let travelStore = usetravelStore()
onMounted(() => {
  setTimeout(() => {  
        initmap();  
      }, 500);
})
//获取节点
let charts = ref()
//引入中国地图的JSON数据
import chinaJSON from './china.json'
//注册中国地图
echarts.registerMap('china', chinaJSON as any)
 
const initmap = () => {
  //获取echarts类的实例
  let mycharts = echarts.init(charts.value)

  
  mycharts.setOption({
    tooltip: {
      triggerOn: 'mousemove',
      formatter: function (e:any) {
        return '.5' == e.value ? e.name : e.seriesName + '<br />' + e.name + '：' + e.value
      }
    },
    visualMap: {
      min: 0,
      max: 100000,
      left: 26,
      bottom: 40,
      showLabel: true,
      text: ['高', '低'],
      textStyle: {
        color: '#eee'
      },

      pieces: [
        {
          gt: 9001,
          label: '>9001人',
          color: '#7f1100'
        },
        {
          gte: 7001,
          lte: 9000,
          label: '7001 - 9000人',
          color: '#ff5428'
        },
        {
          gte: 5001,
          lte: 7000,
          label: '5001 - 7000人',
          color: '#ff5428'
        },
        {
          gte: 3001,
          lt: 5000,
          label: '3001 - 5000人',
          color: '#ff8c71'
        },
        {
          gte: 1001,
          lt: 3000,
          label: '1001 - 3000人',
          color: '#ffd768'
        },
        {
          gte: 1,
          lt: 1000,
          label: '1 - 1000人',
          color: '#BEDAEE'
        }
      ],
      show: true
    },
    geo: {
      map: 'china',
      roam: true,
      scaleLimit: {
        min: 1,
        max: 2
      },
      zoom: 1.13,
      top: 50,
      label: {
        show: false,
        fontSize: '14',
        color: 'rgba(0,0,0,0.7)'
      },
      itemStyle: {
        borderColor: 'rgba(0, 0, 0, 0.2)'
      },
      emphasis: {
        areaColor: '#f2d5ad',
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        borderWidth: 0
      }
    },
    series: [
      {
        name: '旅游景点数',
        type: 'map',
        geoIndex: 0,
        data: travelStore?.traveldata?.city
      }
    ]
  })
}
</script>

<style scoped>
.charts {
  width: 100%;
  height: 550px;
  /* background-color: aliceblue; */
}
</style>
